<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        table {
            width: 80%;
            margin-bottom: 20px;
            background-color: #fff;
            border-collapse: collapse;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        thead {
            background-color: #3498db;
            color: #fff;
        }

        tbody tr:hover {
            background-color: #f5f5f5;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #2ecc71;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        td {
            border: 1px solid #ddd;
            padding: 8px;
            cursor: pointer;
        }

        td[contenteditable="true"]:hover {
            background-color: #f5f5f5;
        button:hover {
            background-color: #27ae60;

        }
    </style>
</head>
<body>
    <h1>标准化 </h1>

    <table>
        <thead>
            <tr>
                <th>EPBH</th>
                <th>标准前字符串</th>
                <th>标准后字符串</th>
                <th>类目</th>
            </tr>
        </thead>
        <tbody>
            <!-- Add rows dynamically using JavaScript -->
        </tbody>
    </table>
    <button onclick="addRow()">添加一行</button>
    <p></p>
    <button onclick="downloadData()">Download Data</button>

    <script>

            function downloadData() {
        // 获取表格行
        const rows = document.querySelectorAll('tbody tr');

        // 准备发送到服务器的数据
        const data = Array.from(rows).map(row => {
            const cells = row.querySelectorAll('td');
            return {
                EPBH: cells[0].textContent,
                BBZHMC: cells[1].textContent,
                BZHMC: cells[2].textContent,
                LM: cells[3].textContent
            };
        });

        // 发送数据到服务器
        fetch('/upload-data', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ data })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('数据上传成功！');
            } else {
                alert('数据上传失败。');
            }
        })
        .catch(error => {
            console.error('错误：', error);
        });
    }
        // Function to download data
        function addRow() {
            // 获取表格的 tbody
            var tbody = document.querySelector('tbody');

            // 创建一行
            var newRow = document.createElement('tr');

            // 为新行创建单元格，并填充示例数据
            var cell1 = document.createElement('td');
            cell1.contentEditable =true;
            cell1.textContent = '';

            var cell2 = document.createElement('td');
            cell2.contentEditable =true;
            cell2.textContent = '';

            var cell3 = document.createElement('td');
            cell3.contentEditable = true;
            cell3.textContent = '';

            var cell4 = document.createElement('td');
            cell4.contentEditable = true;
            cell4.textContent = '';

            // 将单元格添加到行中
            newRow.appendChild(cell1);
            newRow.appendChild(cell2);
            newRow.appendChild(cell3);
            newRow.appendChild(cell4);
            // 将新行添加到表格的 tbody 中
            tbody.appendChild(newRow);
        }
    </script>
</body>
</html>